<template>
    <div class="layout">
        <layout>
            <header>
                <div id="app">
                    <tabs>
                        <tab-pane label="海报制作" icon="image">
                            <img :src="require('../assets/image/f1.jpg')" style="width: 100%;">
                            <div class="fg"><img :src="require('../assets/image/fg.png')"></div>
                            <row :gutter="16">
                                <i-col span="12">
                                    <div><img :src="require('../assets/image/shop.jpg')" style="width: 100%;"></div>
                                </i-col>
                                <i-col span="12">
                                    <div><img :src="require('../assets/image/shop.jpg')" style="width: 100%;"></div>
                                </i-col>
                            </row>
                        </tab-pane>
                        <tab-pane label="海报分类" icon="images" >
                                <Menu :theme="theme3" active-name="1" width="150px">
                                    <MenuGroup title="内容管理">
                                        <MenuItem name="1">
                                            <Icon type="document-text"></Icon>
                                            文章管理
                                        </MenuItem>
                                        <MenuItem name="2">
                                            <Icon type="chatbubbles"></Icon>
                                            评论管理
                                        </MenuItem>
                                    </MenuGroup>
                                    <MenuGroup title="统计分析">
                                        <MenuItem name="3">
                                            <Icon type="heart"></Icon>
                                            用户留存
                                        </MenuItem>
                                        <MenuItem name="4">
                                            <Icon type="heart-broken"></Icon>
                                            流失用户
                                        </MenuItem>
                                    </MenuGroup>
                                </Menu>
                            <content>

                            </content>
                        </tab-pane>
                        <tab-pane label="图片水印" icon="wand">标签三的内容</tab-pane>
                    </tabs>
                </div>
            </header>
            <footer class="layout-footer-center">2011-2016 &copy; TalkingData</footer>
        </layout>
    </div>
</template>

<script>
    import Layout from 'iview/src/components/layout/layout';
    import Header from 'iview/src/components/layout/header';
    import Tabs from 'iview/src/components/tabs/tabs';
    import TabPane from 'iview/src/components/tabs/pane';
    import Content from 'iview/src/components/layout/content';
    import Footer from 'iview/src/components/layout/footer';
    import Row from 'iview/src/components/grid/row';
    import ICol from 'iview/src/components/grid/col';
    import Sider from 'iview/src/components/layout/sider';
    import MenuItem from 'iview/src/components/menu/menu-item';
    import MenuGroup from 'iview/src/components/menu/menu-group';
    import Icon from 'iview/src/components/icon/icon';
    import RadioGroup from 'iview/src/components/radio/radio-group';
    import Radio from 'iview/src/components/radio/radio';
    import Menu from 'iview/src/components/menu/menu';

    export default {
        components: {
            Menu,
            Radio,
            RadioGroup,
            Icon,
            MenuGroup,
            MenuItem,
            Sider,
            ICol,
            Row,
            Footer,
            Content,
            TabPane,
            Tabs,
            Header,
            Layout
        },
        data () {
            return {
                theme3: 'light'
            };
        }

    };
</script>

<style lang="scss">
    header {
        min-height: 100%;
    }

    header {
        min-height: 100%;
    }

    .ivu-tabs-bar {
        margin-bottom: 0;
    }

    .ivu-tabs-nav .ivu-tabs-tab {
        height: auto;
        max-height: 100%;
        flex: 1;
        padding-right: 35px;
    }

    .ivu-tabs-nav {
        width: 100%;
        display: flex;
    }

    .fg {
        margin: 10px 0 10px auto;
        img {
            width: 100%;
        }
    }
    .ivu-menu {
        height: 100%;
        min-height: 100%;
        width: 5rem;
    }
</style>
